<template>
  <div class="container">
    <!-- 版心 -->
    <div class="center">
      <!-- 搜索栏导航 -->
      <div class="nav bg-white flex flex-row justify-between">
        <div class="logo-box">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi.com-assets/shop/img/logo-mi2.png"
            alt=""
            class="logo"
          />
        </div>
        <ul class="nav-box flex flex-row">
          <li
            v-for="item in navInfos"
            :key="item.id"
            class="mx-1.5 nav-item"
            :class="{ 'nav-item-active': route.name === item.path }"
          >
            <RouterLink :to="{ name: item.path }" class="h-full">{{
              item.name
            }}</RouterLink>
          </li>
        </ul>
        <div class="search h-full flex">
          <input type="text" placeholder="红米" class="search-inp" />
          <button
            type="submit"
            class="search-btn iconfont icon-search"
          ></button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "Home",
};
</script>

<script lang="ts" setup>
import { ref } from "vue";
import { useRoute } from "vue-router";
// 导航栏数据
const navInfos = ref([
  {
    id: 1,
    name: "首页",
    path: "main",
  },
  {
    id: 2,
    path: "goods",
    name: "全部商品",
  },
  {
    id: 3,
    name: "关于我们",
  },
  // {
  //   name: "笔记本",
  // },
  // {
  //   name: "平板",
  // },
  // {
  //   name: "家电",
  // },
  // {
  //   name: "路由器",
  // },
  // {
  //   name: "服务中心",
  // },
  // {
  //   name: "社区",
  // },
]);
const route = useRoute();
// console.log(route.name);
</script>

<style scoped>
/* 导航栏 */
.nav {
  height: 100px;
  line-height: 100px;
}
.logo-box {
  height: 100px;
}
.logo {
  height: 56px;
  width: 56px;
  display: inline-block;
  margin: auto;
}
.nav-item-active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.nav-item a:hover {
  color: #ff6a00;
}
.nav-box {
  line-height: 100px;
  margin-right: 15.5vw;
}
.nav-box li a {
  font-size: 16px;
}
.search-inp {
  height: 50px;
  width: 244px;
  border: 1px solid gray;
  /* text-indent: 10px; */
  padding: 10px;
  margin-top: 25px;
  outline: none;
}
.search-btn {
  border: 1px solid gray;
  height: 50px;
  width: 70px;
  margin-top: 25px;
  border-left-style: none;
  border-radius: 0;
  line-height: 50px;
  text-align: center;
}
</style>
